<template>
  <el-dialog title="复制规格" :visible.sync="visible" width="1000px" append-to-body>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table" @afterFetch="handleTableAfterFetch">
      <div slot="filter">
        <el-form :inline="true" ref="form">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model.trim="noWatchParams.name" placeholder="商品名称" size="small" ></el-input>
          </el-form-item>
          <el-form-item label="商品sku码" prop="name">
            <el-input v-model.trim="noWatchParams.skuCode" placeholder="商品sku码" size="small" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" size="small" style="margin-left: 10px;">查询
            </el-button>
          </el-form-item>
        </el-form>

        <div class="mb-10">
          <span>已选规格：</span>
          <el-tag class="mb-10 mr-10" v-for="(item, index) in specList" :key="index" closable @close="handleClose(index, item)">
            {{ item.goodsName }}
            <span class="c-red">{{ item.specs }}</span>
          </el-tag>
        </div>
      </div>
      <template slot="column-complaintLevelName" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" :type="getcomplaintLevelClass(data.complaintLevel)">
          {{data.complaintLevelName}}
        </el-tag>
      </template>
      <template slot="column-goodsSkuS" slot-scope="{data}">
        <div v-if="data.goodsSkuS">
          <el-checkbox class="mb-10 mr-10" size="small" v-for="item in data.goodsSkuS" v-model="item.checked" border clearable @change="handleCheck(item, data)">{{ item.specs }}</el-checkbox>
        </div>
      </template>
    </XmTable>

    <span slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm()" :loading="loading">{{ loading ? '提交中...' : '确定' }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  tableConfig, // 订单日志
} from './config';
import {
  GoodsInfo, //详情
} from "@/api/commodityfiles";
import axios from 'axios';

export default {
  components: {
  },
  data() {
    return {
      tableConfig,
      visible: false,
      specList: [],
      loading: false,
      noWatchParams: {
        deptId: 1,
        name: '',
        parentCategoryId: '1670323326059520',
        skuCode: '',
        isCombination: '1',
      }
    };
  },
  methods: {
    async show() {
      this.visible = true;
      this.initState();
      this.$nextTick(() => {
        this.fetch()
      })
    },
    // 初始状态
    initState() {
      this.specList = [];
    },
    hide() {
      this.visible = false
    },
    fetch() {
      this.$refs.table && this.$refs.table.fetch()
    },
    handleTableAfterFetch(res) {
      if (res.list) {
        // 加载表格数据后复选
        res.list.forEach(item => {
          if (item.goodsSkuS) {
            item.goodsSkuS.forEach($0 => {
              this.$set($0, 'checked', this.specList.some($1 => $1.id === $0.id));
            })
          }
        })
      }
    },
    search() {
      this.fetch()
    },
    handleCheck(spec, goods) {
      const index = this.specList.findIndex(item => item.id === spec.id)
      if (index < 0) {
        spec.goodsName = goods.name;
        this.specList.push(spec);
      } else {
        this.specList.splice(index, 1);
      }
    },
    handleClose(index, spec) {
      spec.checked = false;
      this.specList.splice(index, 1);
    },
    async confirm() {
      if (this.specList.length < 1) {
        this.$message({
          type: 'warning',
          message: '请勾选规格！',
        })
        return
      }
      const goodsIdList = [];
      this.specList.forEach(item => {
        if (!goodsIdList.includes(item.goodsId)) {
          goodsIdList.push(item.goodsId)
        }
      })
      this.loading = true;
      try {
        const goodsListRes = await axios.all(
          goodsIdList.map(item => {
            return GoodsInfo({goodsId: item})
          })
        )
        const goodsList = goodsListRes.map(item => item.data.data);
        const specList = this.specList.map(item => {
          const goods = goodsList.find($0 => $0.id === item.goodsId);
          const spec = goods.goodsSkuList.find($0 => $0.id === item.id);
          return {
            ...spec,
            price: spec.modifyPrice,
          }
        })
        this.$emit('confirm', specList);
        this.visible = false;
      } finally {
        this.loading = false;
      }
    }
  },
  created() {
  }
};
</script>
<style lang="scss" scoped>
</style>